<template>
  <div>
    <CategorySelector :isDisabled="isShowAttrList" />
    <el-card>
      <div v-if="isShowAttrList">
        <el-button
          :disabled="!categoryStore.category3Id"
          type="primary"
          :icon="Plus"
          @click="toAddAttrValue"
          style="margin-bottom: 15px"
          >添加属性</el-button
        >
        <el-table border :data="attrList" v-loading="loading">
          <el-table-column
            type="index"
            align="center"
            label="序号"
            width="80"
          />
          <el-table-column prop="attrName" label="属性名称" width="180" />
          <el-table-column prop="tmName" label="属性值列表">
            <template v-slot="{ row }">
              <el-tag
                v-for="attrValue in row.attrValueList"
                :key="attrValue.id"
                style="margin-right: 5px"
                >{{ attrValue.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="170">
            <template #default="{ row }">
              <el-button
                title="修改属性"
                type="primary"
                size="small"
                :icon="Edit"
                @click="editAttrBtn(row)"
              />
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="orange"
                title="确定要删除此条属性吗?"
                @confirm="confirmDelOneAttr(row.id)"
              >
                <template #reference>
                  <el-button
                    title="删除属性"
                    type="danger"
                    size="small"
                    :icon="Delete"
                  />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-form>
          <el-form-item label="属性名" style="width: 300px">
            <el-input placeholder="请输入属性名" v-model="attrInfo.attrName" />
          </el-form-item>
        </el-form>
        <el-button
          :disabled="!attrInfo.attrName"
          type="primary"
          :icon="Plus"
          style="margin-bottom: 15px"
          @click="addAttrBtn"
          >添加属性</el-button
        >
        <el-table
          :data="attrInfo.attrValueList"
          border
          style="margin-bottom: 15px"
        >
          <el-table-column
            label="序号"
            type="index"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column label="属性值名称">
            <template #default="{ row, $index }">
              <el-input
                ref="inputRef"
                v-if="row.isShowAttrInput"
                v-model="row.valueName"
                @blur="blurEvent(row, $index)"
              />
              <span
                v-else
                style="display: inline-block; width: 100%"
                @dblclick="editAttrValue(row, $index)"
                >{{ row.valueName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ $index }">
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="orange"
                title="确定要删除此条属性值吗?"
                @confirm="confirmDelOneAttrValue($index)"
              >
                <template #reference>
                  <el-button
                    title="删除属性值"
                    type="danger"
                    size="small"
                    :icon="Delete"
                  />
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="saveOrUpdateAttrValue"
          >保存</el-button
        >
        <el-button type="default" @click="isShowAttrList = true"
          >取消</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import CategorySelector from '@/components/CategorySelector/index.vue'
export default {
  name: 'Attr',
  components: {
    CategorySelector,
  },
}
</script>
<script lang="ts" setup>
import { reactive, ref, watch, nextTick } from 'vue'
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue'
import { useCategoryStore } from '@/stores/category'
import {
  reqGetAttrInfoListData,
  reqDelOneAttrInfo,
  reqAddAttrValue,
} from '@/api/product/attr'
import { ElMessage } from 'element-plus'
import type {
  AttrInfoModel,
  AttrValueItem,
} from '@/api/product/model/attrModel'

const categoryStore = useCategoryStore()
const isShowAttrList = ref(true)
const attrList = ref<any>([])
const loading = ref<boolean>(false)

const getAttrListData = async () => {
  loading.value = true
  attrList.value = await reqGetAttrInfoListData(
    categoryStore.category1Id as number,
    categoryStore.category2Id as number,
    categoryStore.category3Id as number
  )
  loading.value = false
}

const attrInfo = reactive<AttrInfoModel>({
  attrName: '',
  attrValueList: [],
  categoryId: -1,
  categoryLevel: 3,
})

//绑定input输入框，用于获取input对象
const inputRef = ref<HTMLInputElement>()

//到添加属性功能
const toAddAttrValue = () => {
  isShowAttrList.value = false
  attrInfo.attrName = ''
  attrInfo.attrValueList = []

  // 清空之前的id 以便保证是正常的添加属性操作
  delete attrInfo.id
}

//点击添加属性值按钮事件
const addAttrBtn = () => {
  attrInfo.attrValueList.push({
    valueName: '',
    isShowAttrInput: true,
    attrId: attrInfo.id,
  })
  nextTick(() => {
    inputRef.value?.focus()
  })
}

//点击编辑属性按钮事件
const editAttrBtn = (row: AttrValueItem) => {
  isShowAttrList.value = false
  Object.assign(attrInfo,row)
}

//添加属性值的输入框失去焦点事件
const blurEvent = (row: AttrValueItem, index: number) => {
  console.log(row, index)
  if (!row.valueName) {
    attrInfo.attrValueList.splice(index, 1)
    return
  }
  row.isShowAttrInput = false
}

//删除属性值
const confirmDelOneAttrValue = (index: number) => {
  attrInfo.attrValueList.splice(index, 1)
}

const editAttrValue = (row: AttrValueItem) => {
  row.isShowAttrInput = true
  nextTick(() => {
    inputRef.value?.focus()
  })
}

// 保存修改或添加的属性
const saveOrUpdateAttrValue = async () => {
  attrInfo.categoryId = categoryStore.category3Id
  const result = await reqAddAttrValue(attrInfo)
  ElMessage.success('操作属性成功...')
  isShowAttrList.value = true
  getAttrListData()
}

watch(
  () => categoryStore.category3Id,
  (category3Id) => {
    if (!category3Id) {
      attrList.value = []
      return
    }
    getAttrListData()
  }
)

const confirmDelOneAttr = async (id: number) => {
  await reqDelOneAttrInfo(id)
  ElMessage.success('删除属性成功！')
  getAttrListData()
}
</script>
<style></style>
